<template>
  <el-dialog title="批量导入" :visible.sync="showDialog" width="700px" append-to-body  @close="dialogFn">
    <div class="download-template"><a :href="`${baseUrl}/excel-model/推介成功实现就业的本省户籍残疾人花名册.xlsx`" >下载导入模板<i class="el-icon-download"></i></a></div>
    <!-- 文件上传 -->
    <section class="upload-wrap">
      <el-upload class="upload-demo" ref="fileUpload" action="#" :auto-upload="false" accept=".xls, .xlsx" :limit="1" :show-file-list="false" :on-change="fileUpload" v-if="!(file && file.name)">
        <img class="upload-icon" :src="require('@/assets/imgs/icon-upload.png')" alt srcset />
        <p class="upload-title">点击上传您的文件</p>
        <p class="upload-tip">文件不得超过10M</p>
      </el-upload>
      <div v-else>
        <img class="upload-icon" :src="require('@/assets/imgs/icon-upload-success.png')" alt srcset />
        <p class="upload-tip">{{file.name}}</p>
        <el-upload class="upload-btn" ref="fileUpload" action="#" :auto-upload="false" accept=".xls, .xlsx" :limit="1" :show-file-list="false" :on-change="fileUpload">重新上传</el-upload>
      </div>
    </section>

    <section class="result-box" v-if="file">
      <div class="result-title">数据校验结果</div>
      <div class="table-box flex-c-s">
        <div class="col flex-c-s flex-col">
          <span class="field">总数据</span>
          <span class="value">{{importInfo.totalCount}}</span>
        </div>
        <div class="col flex-c-s flex-col">
          <span class="field">可导入</span>
          <span class="value">{{importInfo.sucCount}}</span>
        </div>
        <div class="col flex-c-s flex-col">
          <span class="field">格式错误</span>
          <span class="value">{{importInfo.errCount}}</span>
        </div>
        <div class="col flex-c-s flex-col">
          <span class="field">操作</span>
          <span class="value primary" @click="viewErrReason">{{importInfo.errCount ? "查看错误原因" : "--"}}</span>
        </div>
      </div>
    </section>

  </el-dialog>
</template>

<script>
import { businessApi } from "@/api"
import { downloadFileByBlob } from "@/utils/download"

export default {
  name: "upload-dialog",
  props: {
    visible: {
      type: Boolean,
      default: false
    }
  },
  data(){
    return {
      showDialog: false,
      baseUrl: process.env.NODE_ENV === "production" ? process.env.VUE_APP_BASE_URL.replace("/api", "").replace("/ggfw", "") : "http://10.206.142.65",
      file: null,
      importInfo: {}
    }
  },
  watch: {
    visible: {
      handler(val){
        if (val){
          this.showDialog = val
        }
      }
    }
  },
  methods: {
    viewErrReason(){
      if (!this.importInfo.isError) {
        return
      }
      businessApi.intermediaryIntroduceExportErrMsg().then(data => {
        downloadFileByBlob(data, "批量导入失败原因.xlsx", "octet-stream")
      })
    },
    fileUpload(file){
      const fileType = file.name.substring(file.name.lastIndexOf(".") + 1)
      if (fileType === "xlsx" || fileType === "xls") {
        const fileSize = this.byteToMb(file.size)
        if (fileSize <= 10) {
          const formData = new FormData
          formData.append("excelFile", file.raw, file.raw.name)
          businessApi.intermediaryIntroduceImportWorker(formData).then(res => {
            if (res.isError) {
              this.$message.error(res.validTmpStr)
              this.file = file
              this.importInfo = res
            } else {
              this.$modal.msgSuccess("批量导入成功")
              this.showDialog = false
              this.file = undefined //导入文件
              this.importInfo.isError = true
              this.$emit("success")
            }

          }).catch(err => {
            this.importInfo = {
              isError: true
            }
            this.file = undefined
            this.$modal.msgError("上传失败，请重新上传!")
          })
        } else {
          this.$modal.msgWarning("文件不得超过10M")
        }
      } else {
        this.$modal.msgWarning("请上传正确的文件格式哟～")
      }
      this.$refs.fileUpload.clearFiles()
    },
    dialogFn(){
      this.$emit("update:visible", false)
    },
    // MB 转换成 byte
    byteToMb(val) {
      return (val / 1048576).toFixed(2)
    }
  }
}
</script>

<style scoped lang="scss">
.el-dialog {
  .upload-wrap {
    margin: 42px auto 32px;
    text-align: center;
    width: 346px;
    padding: 16px 0;
    background: #fff;
    box-shadow: 0px 0px 10px 0px rgba(114, 154, 215, 0.23);
    border-radius: 16px;
    .upload-icon {
      width: 90px;
      height: 90px;
      margin: 12px 0 0;
    }
    p {
      margin: 0;
    }
    .upload-title {
      margin-top: 14px;
      font-size: 18px;
      color: #1a3a5c;
      font-weight: bold;
      cursor: pointer;
    }
    .upload-tip {
      margin-top: 18px;
      font-size: 14px;
      color: #1a3a5c;
      padding: 0 20px;
    }
    .xz-ellipsis-3 {
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
    }
    .upload-btn {
      color: #2a79ee;
      width: 88px;
      height: 28px;
      border: 1px solid #2a79ee;
      text-align: center;
      line-height: 28px;
      margin: 24px auto 0;
      font-size: 12px;
      font-weight: bold;
      border-radius: 4px;
    }
  }

  .result-box {
    .result-title {
      font-size: 22px;
      color: #333;
    }

    .table-box {
      margin-top: 12px;
      border: 1px solid #999;
      .col {
        width: 25%;
        border-right: 1px solid #999;
        &:last-child {
          border-right: none;
        }
        .field {
          width: 100%;
          height: 40px;
          line-height: 40px;
          text-align: center;
          background: #eee;
          font-size: 16px;
          color: black;
          border-bottom: 1px solid #999;
        }
        .value {
          height: 40px;
          line-height: 40px;
          font-size: 16px;
          color: black;
          &.primary {
            color: #2a79ee;
            cursor: pointer;
          }
        }
      }
    }
  }
  .btn-box {
    margin-top: 20px;
  }
  .require {
    color: red;
  }
  .dialog-main-tips {
    font-size: 22px;
    color: #333;
    margin: 0;
  }
  .dialog-second-tips {
    font-size: 18px;
    color: #666;
  }
  .download-template {
    font-size: 18px;
    color: #2a79ee;
    cursor: pointer;
  }
}
</style>